iT邦幫忙

material design相關文章
共有 141 則文章
0 Like 0 留言 115 瀏覽
鐵人賽 Modern Web DAY 6
Awesome self hosted 30天 系列 第 6 篇

技術 自訂登入頁面樣式，使用 Keycloakify

目前的登入頁面是跳轉到 Keycloak 預設的登入頁，所以會出現樣式跟 NextJs App 不一致的情形，keycloak 本身是有自訂樣式的功能，但與 R...

Jasper ‧ 2024-09-20 ‧團隊北投溫泉公園的蛞蝓觀察小隊
0 Like 0 留言 901 瀏覽
鐵人賽 Modern Web DAY 11
從零開始：全端新手的困境與成長 系列 第 11 篇

技術 Day11 利用 Angular Material 高效開發：不要再自己從零開始刻了

在寫程式的過程中，初學者常常會有一種衝動，那就是從頭開始，從零構建所有的東西，一開始會覺得這樣做比較好，也會對 coding 比較熟悉，但事實上，它不僅耗時，還...

Chiayu ‧ 2024-09-19
2 Like 0 留言 1893 瀏覽
鐵人賽 Mobile Development DAY 30
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 30 篇

技術 Day 30 - Tab ( Implementation ) & 完賽後記

大綱 Simple Using Fixed tabs Scrollable tabs Anatomy Key properties Style Simpl...

vosscg0822 ‧ 2022-10-15 ‧團隊好想工作室 v6.0
0 Like 0 留言 1940 瀏覽
鐵人賽 Mobile Development DAY 29
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 29 篇

技術 Day 29 - Tabs ( Design )

前言 不知不覺鐵人賽也接近尾聲，要講的最後一個元件是 Tab，也是一種導航切換畫面的元件，圍繞在同一主題上。在大多數的 App 都能看到，包裹著相關性高或相同應...

vosscg0822 ‧ 2022-10-14 ‧團隊好想工作室 v6.0
0 Like 0 留言 1212 瀏覽
鐵人賽 Mobile Development DAY 28
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 28 篇

技術 Day 28 - Navigation Drawer ( Implementation )

大綱 Simple Using Anatomy Key properties Modal navigation drawer Bottom navigatio...

vosscg0822 ‧ 2022-10-13 ‧團隊好想工作室 v6.0
0 Like 0 留言 1602 瀏覽
鐵人賽 Mobile Development DAY 27
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 27 篇

技術 Day 27 - Navigation drawer (Design)

前言 是一個作為導航工具的組件，能讓用戶隨時展開或收起，與 Bottom Navigation 相同都是作為跳轉畫面的元件，但應用上有些不同，上幾篇我有提到 B...

vosscg0822 ‧ 2022-10-12 ‧團隊好想工作室 v6.0
0 Like 0 留言 1419 瀏覽
鐵人賽 Mobile Development DAY 26
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 26 篇

技術 Day 26 - Bottom Navigation ( Implementation )

大綱 Using Anatomy Key properties Style Using 先就簡單地做一下基本的架構，需要BottomNavigationVi...

vosscg0822 ‧ 2022-10-11 ‧團隊好想工作室 v6.0
0 Like 0 留言 1430 瀏覽
鐵人賽 Mobile Development DAY 25
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 25 篇

技術 Day 25 - Bottom Navigation ( Design )

前言 Bottom Navigation 通常作為主畫面的元件之一，位於畫面底部，能讓用戶操作並進行各個畫面的導航，是個以操作體驗與畫面跳轉為重的組件 Bo...

vosscg0822 ‧ 2022-10-10 ‧團隊好想工作室 v6.0
0 Like 0 留言 2423 瀏覽
鐵人賽 Modern Web DAY 24
前端技能樹的十萬個為什麼 系列 第 24 篇

技術 Day 24 - 為什麼要用 Material-ui

前言 昨天聊到 styled-components，以及 CSS-in-JS 對於 React 開發的重要性，但考量到程式規模愈趨複雜，不太可能連一些很基本的元...

ycchiuuuu ‧ 2022-10-09
0 Like 0 留言 469 瀏覽
鐵人賽 Mobile Development DAY 23
關於我用 Compose UI 造新輪子這檔事 系列 第 23 篇

技術 Day 23 - Material Design

Android 遵循的一套視覺設計規範叫 Material Design，目前分為 Material 2 與 Material 3，Android 11（含）以...

Mikucat ‧ 2022-10-08 ‧團隊那團名要叫什麼？
1 Like 0 留言 809 瀏覽
鐵人賽 Mobile Development DAY 30
Kotlin 實踐 Material Design 懶人包 系列 第 30 篇

技術 Day30 Motion - Fade through 、Fade（3）

繼前兩天章節 Day28 使用M3的Motion - Transition Patterns四種模式，其中的Container transform patter...

Anna ‧ 2022-10-14
1 Like 0 留言 1019 瀏覽
鐵人賽 Mobile Development DAY 29
Kotlin 實踐 Material Design 懶人包 系列 第 29 篇

技術 Day29 使用M3的Motion - Shared axis（2）

繼前一章節 Day28 使用M3的Motion - Transition Patterns四種模式，其中的Container transform pattern...

Anna ‧ 2022-10-13
0 Like 0 留言 1245 瀏覽
鐵人賽 Mobile Development DAY 28
Kotlin 實踐 Material Design 懶人包 系列 第 28 篇

技術 Day28 使用M3的Motion - Transition Patterns四種模式，其中的Container transform patterns (1)

Material Design的Ｍotion由四種模式組成，用於在元件或全屏檢視之間過渡轉換動畫，這些模式主要在透過加強使用者介面元素之間的關係來幫助使用者瀏覽...

Anna ‧ 2022-10-12
1 Like 0 留言 1327 瀏覽
鐵人賽 Mobile Development DAY 26
Kotlin 實踐 Material Design 懶人包 系列 第 26 篇

技術 Day26 使用M3的Progress Indicators

Progress 有分兩種類型 Linear progress indicator Circular progress indicator 實作上探討...

Anna ‧ 2022-10-10
0 Like 0 留言 1526 瀏覽
鐵人賽 Mobile Development DAY 23
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 23 篇

技術 Day 23 - Bottom Sheet ( Design )

前言 Bottom Sheet 算是比較近期 App 非常熱門的應用設計，從底部彈跳出視窗。通常會搭配在 more action，提供用戶與當前情境畫面的細部操...

vosscg0822 ‧ 2022-10-08 ‧團隊好想工作室 v6.0
1 Like 0 留言 479 瀏覽
鐵人賽 Mobile Development DAY 24
Kotlin 實踐 Material Design 懶人包 系列 第 24 篇

技術 Day24 使用M3的Sliders

Sliders是使用條形的滑動進行檢視和選值或範圍，非常適合調整音量和亮度等設定等。 Silders 有分兩種類型 Continuous slider Di...

Anna ‧ 2022-10-08
0 Like 0 留言 1097 瀏覽
鐵人賽 Mobile Development DAY 22
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 22 篇

技術 Day 22 - Cards ( Implementation )

大綱 Simple Using Making card checkable Making card draggable Cards Elevated...

vosscg0822 ‧ 2022-10-07 ‧團隊好想工作室 v6.0
0 Like 0 留言 1002 瀏覽
鐵人賽 Mobile Development DAY 21
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 21 篇

技術 Day 21 - Cards ( Design )

前言 Card 的設計，已經廣泛出現在我們的應用程式中，例如 ig、facebook 等等，是一種元件配置的設計方式，並非只是單純一個元件 Cards - D...

vosscg0822 ‧ 2022-10-06 ‧團隊好想工作室 v6.0
0 Like 0 留言 2334 瀏覽
鐵人賽 Mobile Development DAY 20
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 20 篇

技術 Day 20 - Dialogs ( Implementation )

大綱 Alert dialog Simple dialog Confirmation dialog Full-screen dialog Anatomy Ke...

vosscg0822 ‧ 2022-10-05 ‧團隊好想工作室 v6.0
0 Like 0 留言 889 瀏覽
鐵人賽 Mobile Development DAY 28
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 28 篇

技術 Day28 實作 DateTimePicker

前言 昨天完成 Training 頁面雛形，今天要來加一些更改數據的互動。 首先是日期調整這裡要用到 DatePickerDialog Date Picker...

ChuLin ‧ 2022-10-04 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
1 Like 0 留言 1081 瀏覽
鐵人賽 Mobile Development DAY 23
Kotlin 實踐 Material Design 懶人包 系列 第 23 篇

技術 Day23 使用M3MaterialSwitch

當需要開啟或關閉單一選項時，可使用Switch ，最常用於手機裝置，以啟用和禁用選項或是選單中的選項。開啟和關閉表示一個具有兩種狀態的按鈕，開關由軌道和拇指組成...

Anna ‧ 2022-10-07
0 Like 0 留言 1303 瀏覽
鐵人賽 Mobile Development DAY 19
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 19 篇

技術 Day 19 - Dialogs ( Design )

前言 Dialog 比起上一篇提到的 Snackbar，更為顯著且出現時會阻擋用戶操作 Dialogs - Design 分為下面幾個段落來介紹 Usag...

vosscg0822 ‧ 2022-10-04 ‧團隊好想工作室 v6.0
1 Like 0 留言 925 瀏覽
鐵人賽 Mobile Development DAY 22
Kotlin 實踐 Material Design 懶人包 系列 第 22 篇

技術 Day22 使用M3的Navigation bar

Navigation bar 主要手機裝置位於螢幕底部固定呈現，通常顯示3~5個item，當需要5個以上、3個以下皆考慮使用Chips 、navigation...

Anna ‧ 2022-10-06
1 Like 0 留言 878 瀏覽
鐵人賽 Mobile Development DAY 21
Kotlin 實踐 Material Design 懶人包 系列 第 21 篇

技術 Day21 使用M3的Navigation rail

Navigation rail 元件會顯示在應用程式中每個螢幕的同一側，顯示3到7個item。通常適用於平板的螢幕上，但也可以在手機裝置上使用，判斷螢幕寬度大小...

Anna ‧ 2022-10-05
1 Like 0 留言 2275 瀏覽
鐵人賽 Mobile Development DAY 20
Kotlin 實踐 Material Design 懶人包 系列 第 20 篇

技術 Day20 使用M3的Navigation drawer

Navigation drawer 預設情況下可以開啟或關閉，以適應不同的應用程式佈局，有兩種型別的Standard、Modal。Standard標準非常適合頻...

Anna ‧ 2022-10-04
0 Like 0 留言 1425 瀏覽
鐵人賽 Mobile Development DAY 18
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 18 篇

技術 Day 18 - SnackBars ( Design & Implementation)

前言 Snackbar，是很常見的應用通知設計，位於應用程式的底部，提供用戶目前操作的任何相關訊息。由於 Snackbar 實作的篇幅較少，就一起講解 大綱...

vosscg0822 ‧ 2022-10-03 ‧團隊好想工作室 v6.0
0 Like 0 留言 677 瀏覽
鐵人賽 Mobile Development DAY 26
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 26 篇

技術 Day 26 把主畫面組起來！

前言 學以致用，把主畫面組裝起來。 MainScreen 這裡傳三個 funtion 用來做頁面轉換用。 @OptIn(ExperimentalMateria...

ChuLin ‧ 2022-10-02 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
0 Like 0 留言 1927 瀏覽
鐵人賽 Mobile Development DAY 17
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 17 篇

技術 Day 17 - Progress indicators ( Implementation )

大綱 Simple Using Linear progress indicators Circular progress indicators Anatomy...

vosscg0822 ‧ 2022-10-02 ‧團隊好想工作室 v6.0
0 Like 0 留言 1088 瀏覽
鐵人賽 Mobile Development DAY 16
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 16 篇

技術 Day 16 - Progress indicators ( Design )

前言 用來通知用戶正在進行的進程狀態，例如 加載應用程序、提交表單或保存更新應用程序的狀態並指示可用的操作，例如用戶是否可以離開當前屏幕。在進行異步或初始化時常...

vosscg0822 ‧ 2022-10-01 ‧團隊好想工作室 v6.0
0 Like 0 留言 926 瀏覽
鐵人賽 Mobile Development DAY 15
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 15 篇

技術 Day 15 - Divider ( Design & Implementation )

前言 Divider 是能將要在 UI 呈現的重點內容，更加清晰且顯眼地表達。在我們想呈現列表形式的資料時，透過 Divider 的劃分，讓用戶能明顯辨識之間的...

vosscg0822 ‧ 2022-09-30 ‧團隊好想工作室 v6.0
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22217 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙